<template>
	<view class="pagebox">
		<div class="fen_h" style="padding-top: 1px;">
		<div class="q_tip">
			<p class="rpx28 app_col">* Q5.<text class="rpx28 col282">请根据所有主货架的统计结果，记录主货架上饮料产品的陈列面数。</text></p>
		</div>
		<div  class="huojia">
		   <scroll-view scroll-x="true" class="h_hj">
			<view v-for="(item,index) in colItem" :key="index" class="h_hj_it rpx24" :class="{'col999':active == index}" @click="changeCol(item,index)">{{item}}</view>
			</scroll-view>
			<div class="h_jia">
				<navigator class="rpx44 col8A8" @click="addCol">+</navigator>
				<navigator class="rpx44 col8A8" @click="delCol">-</navigator>
			</div>
		</div>
		</div>
		<view class="page-body">
			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
				<view class="nav-leftbox" v-for="(item,index) in message[active].categoryList" :key="index">
					<view class="nav-left-item " @click="categoryClickMain(item,index)" :class="index==categoryActive?('active n_it'+index):('n_it'+index)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			 <!-- @scrolltolower="get_goods(cid)" -->
			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" 
			 :style="'height:'+height+'px'" scroll-with-animation>
				<div class="g_item" v-for="(item,index) in message[active].goods.item" :key="item.id+active">
					
						<div class="g_title">
							<p class="rpx28 app_col">{{item.name}}</p>
							<div class="gt_img">
								<image :src="item.img" mode="aspectFit"></image>
							</div>
						</div>
						<div class="g_it" v-for="(innerItem,innerIndex) in item.item" :key="innerItem.id+active">
							<p class="rpx26 col333">{{innerItem.name}}</p>
							<div class="g_num">
								<p class="rpx28 col666">陈列面数:</p>
								<uni-number-box :value="innerItem.value" class="g_numbox rpx32 col3A4060" :min="0" @change="bindChange($event,index,innerIndex)"></uni-number-box>
							</div>
						</div>
				</div>
				<div style="height: 284upx;"></div>
				<div class="but88box">
					<navigator @click="save" class="but88 rpx32 colfff app_bg" >下一步</navigator>
				</div>
			</scroll-view>
		</view>
		
		<uni-popup class="u_p" :show="type === 'center'" position="middle" mode="fixed" msg="" @hidePopup="togglePopup('')" >
			<div class="show_up">
				<img class="lx_img" src="static/s4.png" />
				<div class="lx_title">
					<p class="rpx28 app_col omit2">* Q6.<text class="rpx28 col282">请查看该店铺还有其他饮料主货架？</text></p>
				</div>
				<div class="lx_but">
					<navigator class="rpx34 colfff">无</navigator>
					<navigator class="rpx34 colfff app_bg">有</navigator>
				</div>
			</div>
		</uni-popup>
		<uni-popup class="u_p" :show="type === 'top'" position="top" mode="fixed" msg="" @hidePopup="togglePopup('')" >
			<div class="u_p_box">
				<p class="u_p_back rpx26 app_col" @click="toAnywhere(1)"><span style="width: 10upx;"></span>返回上传列表</p>
				<p class="rpx28 app_col" @click="toAnywhere(2)">* Q1.<text class="rpx28 col282">请找到该店铺饮料产品的主货架，并记录主货架中有无以下产品。</text></p>
				<p class="rpx28 app_col" @click="toAnywhere(3)">* Q2.<text class="rpx28 col282">请记录以下产品在主货架中的排面数量。</text></p>
				<p class="rpx28 app_col" @click="toAnywhere(4)">* Q3.<text class="rpx28 col282">请您到冰柜或现场的二次陈列（包括堆头. 堆箱. 端架. 陈列架. 冰爽站等）查看是否有以下产品。</text></p>
				<p class="rpx28 app_col" @click="toAnywhere(5)">* Q3_1.<text class="rpx28 col282">请确认以下产品包装是否“英超”主题包装。</text></p>
				<p class="rpx28 app_col" @click="toAnywhere(6)">* Q4.<text class="rpx28 col282">请记录以下产品的最低价格，如有促销则记录促销价。单位为元，请记录到小数点后一位。</text></p>
				<p class="rpx28 app_col" @click="toAnywhere(7)">* Q5.<text class="rpx28 col282">请根据所有主货架的统计结果，记录主货架上饮料产品的陈列面数。</text></p>

			</div>
		</uni-popup>
	</view>
</template>

<script>
	var util = require('../../mixins/util.js');
	import mixins from "@/mixins";
    import uniNumberBox from "../../components/uni-number-box/uni-number-box.vue"
	import uniPopup from "../../components/uni-popup/uni-popup.vue"
	import {mapState} from "vuex"
	var current_page = 0;
	var last_page = 1;
	export default {
		components: {uniNumberBox,uniPopup},
		data() {
			return {
				type: '',
				cat_goods: '',
				cid: '',
				two_id: '',
				two_fl: false,
				two_top: 0,
				two_ind: 0,
				two_data: [{
					name: '分类'
				}, {
					name: '分类'
				}, {
					name: '分类'
				}, {
					name: '分类'
				}, {
					name: '分类'
				}, ],
				goods: {},
				categoryList: [],
				message:[
					{
						index:0,
						goods: {},
						categoryList: []
					},
					{
						index:1,
						goods: {},
						categoryList: []
					}
				],
				subCategoryList: [],
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollHeight: 0,
				colItem:["货架1","货架2"],
				active:0,
				question:[],
				shopId:0,
				catId:0
			}
		},
		onBackPress() {
			
		},
		onNavigationBarButtonTap(){
			if(this.type==''){
				this.type='top'
			}else{
				this.type=''
			}
		},
		onReachBottom(e) {
			var _this = this;
			//_this.get_goods(_this.two_id ? _this.two_id : _this.cid);
		},
		onShow() {
			var _this=this;
			let l_bot = uni.createSelectorQuery().select(".fen_h");
			setTimeout(()=>{
				l_bot.fields({
					size: true,
					scrollOffset: true,
					rect: true
				}, data => {
					console.log(data)
					_this.height = _this.height - data.height;
				}).exec();
			},30)
		},
		onLoad: function(e) {
			var _this = this;
			_this.shopId = e.shopId;
			_this.catId = e.catId;
			if (e.cid) {
				_this.cid = e.cid;
			}
			_this.two_id = '';
			current_page = 0;
			last_page = 1;
			this.height = uni.getSystemInfoSync().windowHeight;
			//获取数据
			uni.getStorage({
				key:'shopId-'+_this.shopId,
				success:res=>{
					if(res.data.q5){
						_this.message = res.data.q5;
						_this.categoryList = res.data.q5[0].categoryList
						_this.goods = res.data.q5[0].goods
						let len = res.data.q5.length
						this.colItem = []
						for(let i=0;i<len;i++){
							_this.colItem.push("货架"+(i+1))
						}
					}else{
						uni.getStorage({
							key:'question',
							success:res=>{
								//_this.question = res.data;
								_this.categoryList = JSON.parse(JSON.stringify( res.data[5].logic ))							
								_this.goods = JSON.parse(JSON.stringify( res.data[5].logic[0] ))
								if (res.data[5].sel_data) {
									_this.message = res.data[5].sel_data
									_this.message.forEach((ele)=>{
										ele.goods = ele.categoryList[0]
									})
									let len = res.data[5].sel_data.length
									this.colItem = []
									for(let i=0;i<len;i++){
										this.colItem.push("货架"+(i+1))
									}
								}else{
									_this.message.forEach((ele)=>{
										ele.categoryList = JSON.parse(JSON.stringify( res.data[5].logic ))
										ele.goods = JSON.parse(JSON.stringify( res.data[5].logic[0] ))
									})
								}
							}
						})
					}
				},
				fail:res=>{
				}
			})
		},
		computed:{
			// ...mapState(['storeId']),
			// ...mapState(['catId'])
		},
		methods: {
			toAnywhere(index){
				if(index == 1){
					this.type=''
					mixins.navigate('../index/lixian_steps?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==2){
					this.type=''
					mixins.navigate('../q1/q1?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==3){
					this.type=''
					mixins.navigate('../q1/q2?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==4){
					this.type=''
					mixins.navigate('../q1/q3?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==5){
					this.type=''
					mixins.navigate('../q1/q3_1?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==6){
					this.type=''
					mixins.navigate('../q2/q4?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==7){
					this.type=''
					mixins.navigate('../q2/q5?shopId='+this.shopId+'&catId='+this.catId);
				}
			},
			bindChange(e,index,innerIndex) {
				this.message[this.active].goods.item[index].item[innerIndex].value=e
			},
			changeCol(item,index){//切换货架
				console.log(item)
				this.categoryActive = 0
				this.active = index
				this.message[this.active].goods =this.message[this.active].categoryList[0]
				
			},
			addCol(){
				this.colItem.push('货架'+(this.colItem.length+1))
				this.message.push({
					index:this.message.length,
					goods:JSON.parse(JSON.stringify( this.goods )),
					categoryList:JSON.parse(JSON.stringify( this.categoryList )),
				})
			},
			delCol(){
				this.colItem.splice(this.colItem.length-1,1)
			},
			save(){
				//保存数据~
				uni.getStorage({
					key:'shopId-'+this.shopId,
					success:res=>{
						res.data.q5 = this.message
						uni.setStorage({
							key:'shopId-'+this.shopId,
							data:res.data,
							success:res=>{
								mixins.navigate("../index/lixian_steps?shopId="+this.shopId+"&catId="+this.catId);
							}
						})
					}
				})
				// this.question[5].sel_data = this.message;
				// let _that = this;
				// uni.setStorage({
				// 	key: "question",
				// 	data: _that.question
				// });
				
			},
			togglePopup(type) {
				this.type = type;
			},
			_goto(url) {
				util._goto(url);
			},
			get() {
				var _this = this;
				util._get('get_categories', 'get', {
					goods: 1
				}).then(res => {
					_this.categoryList = res.data;
					for (var i = 0; i < res.data.length; i++) {
						_this.get_two(res.data[i].id, i);
					}
				})
			},
			get_two(cid, i) {
				var _this = this;
				_this.two_data = [];

				util._get('get_categories', 'get', {
					goods: 1,
					pid: cid
				}, 'none').then(res => {
					// _this.two_data=res.data;
					_this.categoryList[i]['two_data'] = res.data;
					if (!_this.cid && i == (1 + _this.categoryList.length)) {
						_this.cid = _this.categoryList[0].id
						if (_this.categoryList[0].two_data.length) {
							_this.get_goods(_this.categoryList[0].two_data[0].id);
						} else {
							_this.get_goods(cid);
						}
						_this.categoryActive = 0;
					} else if (_this.cid == cid) {
						if (res.data.length) {
							_this.get_goods(res.data[0].id);
						} else {
							_this.get_goods(cid);
						}
						_this.categoryActive = i;

					}
				})
			},
			get_goods(cid) {
				var _this = this;
				if (last_page > current_page) {
					current_page++;
					util._get('get_goods', 'get', {
						cid: cid,
						page: current_page
					}).then(res => {
						_this.goods = current_page > 1 ? _this.goods.concat(res.data.data) : res.data.data;
						current_page = res.data.current_page;
						last_page = res.data.last_page;
						_this.cid = cid;
					})
				} else {
					if (_this.goods.length) {
						util.apptoast("已经到底了");
					}
				}
			},
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
				this.two_fl = false;
			},
			sel_two(categroy, index, ind) {
				this.two_ind = index;
				this.categoryActive = ind;
				// this.subCategoryList = categroy.subCategoryList;
				this.scrollTop = -this.scrollHeight * index;

				current_page = 0;
				last_page = 1;
				this.two_id = categroy.id;
				this.get_goods(categroy.id);
				var _this = this;
				setTimeout(function() {
					_this.two_fl = false;
				}, 800)
			},
			categoryClickMain(categroy, index) {
				if (this.categoryActive != index) {
					this.two_ind = 0;
				}
				this.categoryActive = index;
				this.scrollTop = -(this.scrollHeight * index);
				this.message[this.active].goods = categroy
			},
			getCategory() {
				for (var i = 1; i < 21; i++) {
					var subList = [];
					for (var j = 1; j < 31; j++) {
						subList.push({
							"NAME": "分类" + i + ":商品" + j,
							"LOGO": "http://placehold.it/50x50"
						})
					}
					this.categoryList.push({
						"NAME": "分类" + i,
						"subCategoryList": subList
					})
				}
				this.subCategoryList = this.categoryList[0].subCategoryList;
			},
			startcreatview() {
				var s = this;
				s.TitleTimer = setTimeout(function() {
					s.createView();
				}, 100); //具体缓迟时间可以按需设置  
			},
			
		},
	}
</script>

<style scoped>
	.huojia{display: flex;justify-content: space-between;align-items: center;height: 60upx;background: #D8D8D8;}
	.h_jia{display: flex;justify-content: space-between;align-items: center;width: 134upx;}
	.h_jia navigator{width:44upx;height:44upx;line-height: 44upx;background:rgba(255,255,255,1);border-radius:4upx;display: flex;justify-content: center;align-items: center;}
	.h_jia navigator:last-child{margin-right: 24upx;}
	.h_hj{width: 600upx;height: 60upx;display: flex;justify-content: center;align-items: center;}
	.h_hj_it{margin: 8upx 0 8upx 30upx;width:86upx;height:44upx;line-height: 44upx;text-align: center;background:rgba(255,255,255,1);border-radius:4upx;display: inline-block;}
	.h_hj_it:first-child{margin-left: 24upx;}
		.page-body {display: flex;}
		.nav {display: flex;width: 100%;}
		.nav-left {width: 220upx;}
		.nav-left-item {background: #fff;color: #fff;border-left: 0upx solid #888;padding: 10upx 14upx 10upx 24upx;color: #666;line-height: 40upx;min-height: 76upx;font-size: 24upx;display: flex;align-items: center;}
		.nav-right {width: 530upx;}
		.nav-right-item {width: 28%;height: 220upx;float: left;text-align: center;padding: 11upx;font-size: 28upx;}
		.nav-right-item image {width: 100upx;height: 100upx;}
		.nav-left-item.active {color: #333;background: none;}
		.nav-left-item:before {content: '';width: 4upx;height: 40upx;background: none;position: absolute;left: 0;}
		.nav-left-item.active:before {background: #FB001A;}
		/* .nav-left-item.active {color: #FB5722;border-left-color:#FB5722 ;box-sizing: border-box;background: #fff;} */
		
		.g_item{margin: 48upx 24upx 0 16upx;}
		.g_item:first-child{margin-top: 30upx;}
		.g_title{display: flex;justify-content: space-between;margin: 30upx auto 16upx;}
		.g_title > p{margin-top: 15upx;}
		.gt_img{width: 300upx;height: 110upx;}
		.gt_img image{display: block;width: auto;height: 110upx;}
		.g_it{background: #fff;padding: 26upx 28upx 30upx 30upx;margin-bottom: 20upx;}
		.g_it > p{line-height: 40upx;min-height: 40upx;}
		.g_num{height: 50upx;margin-top: 50upx;display: flex;justify-content: space-between;align-items: center;}
		.g_numbox{height: 50upx;width: 160upx;border-radius: 25upx;background: #F6F6F6;}
		.g_numbox:after{content: unset;}
		.g_numbox >>> .uni-numbox__minus,.g_numbox >>> .uni-numbox__plus{color: #fff;width:50upx;height:50upx;background:rgba(250,124,136,1);border-radius:50%;}
		.g_numbox >>> .uni-numbox__plus{background: #D33E3E;}
		.g_numbox >>> .uni-numbox__value{background: none;width: 60upx;}
		.g_numbox >>> .uni-numbox__value:after{content: unset;}
		
	.but88box{position: fixed;bottom: 0;width: 530upx;background: #F7F7F7;}	
	.but88{margin: 102upx 24upx 102upx 16upx;height: 80upx;width:unset;}
	
	.u_p >>> .uni-popup{height: unset !important;top:88upx;}
	.u_p_box p{line-height: 50upx;margin: 0 34upx;text-align: left;margin-bottom: 65upx;}
	p.u_p_back{overflow: hidden;width:210upx;height:48upx;margin:30upx 14upx 40upx;display: flex;align-items: center;justify-content: center;background:rgba(255,228,231,1);border-radius:0px 4upx 4upx 0px;}
	p.u_p_back:before{content: '';margin-left: -34upx;width: 36upx;height: 48upx;box-sizing: border-box;border: 24upx solid #fff;border-right-color: transparent;}
	.u_p >>> .uni-popup{height: unset !important;border-radius:8upx;padding: 0;}
	
</style>
